<!doctype html> 
<html>
<head>
<meta charset="utf-8"> 
<title>中联物流</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/home.css" type="text/css" />
<link rel="stylesheet" href="css/swiper.min.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/swiper.min.js" type="text/javascript"></script>
</head>
<body>
  <!-- header -->
  <div class="header-warpper">
    <div class="header">
      <div class="header-banner">
        <img src="image/home/banner.png" alt="背景图">  
      </div>
      <div class="header-content">
        <div class="carlogo-warpper">
          <ul id="carlogo" class="carlogo">
            <!-- <li class="bor-r1 bor-b1">
              <img src="image/home/carLogo/长安福特.png" alt="">
              <p>
                <em>中铁特货</em>
                <span>目前已有几十个主机厂、20个品牌签订了全面战略合作协议</span>
              </p>
            </li>        -->
          </ul>    
        </div>
      </div>
    </div>  
  </div>
  <script type="text/javascript">
  $(function(){
    var warpli = ""
    var logoList= [
            { name: '长安福特',tilte:'中铁特货',imgurl:'image/home/carLogo/长安福特.png', content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '比亚迪',tilte:'中铁特货',imgurl:'image/home/carLogo/比亚迪.png', content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '江铃',tilte:'中铁特货',imgurl:'image/home/carLogo/江铃.png' ,content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '上汽通用',tilte:'中铁特货',imgurl:'image/home/carLogo/上汽通用.png' ,content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '宝骏汽车',tilte:'中铁特货',imgurl:'image/home/carLogo/宝骏汽车.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '一汽大众',tilte:'中铁特货',imgurl:'image/home/carLogo/一汽大众.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '丰田',tilte:'中铁特货',imgurl:'image/home/carLogo/丰田.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '本田',tilte:'中铁特货',imgurl:'image/home/carLogo/本田.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '郑州日产',tilte:'中铁特货',imgurl:'image/home/carLogo/郑州日产.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '一汽汽车',tilte:'中铁特货',imgurl:'image/home/carLogo/一汽汽车.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '长安汽车',tilte:'中铁特货',imgurl:'image/home/carLogo/长安汽车.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '五菱汽车',tilte:'中铁特货',imgurl:'image/home/carLogo/五菱汽车.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '荣威汽车',tilte:'中铁特货',imgurl:'image/home/carLogo/荣威汽车.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '长城汽车',tilte:'中铁特货',imgurl:'image/home/carLogo/长城汽车.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '红旗',tilte:'中铁特货',imgurl:'image/home/carLogo/红旗.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' },
            { name: '上汽大众',tilte:'中铁特货',imgurl:'image/home/carLogo/上汽大众.png' , content: '目前已有几十个主机厂、20个品牌签订了全面战略合作协议' }
          ] 
    for(var z=0 ; z<logoList.length ;z++){
      warpli = "<li  class='bor-r1 bor-b1'>";
      warpli += "<img src="+logoList[z].imgurl +" alt=''>";
      warpli += "<p><em>"+logoList[z].tilte+"</em><span>"+logoList[z].content +"</span></p></li>"
      $('#carlogo').append(warpli);
    }
    var warpliclear = "<div style='clear:both;'></div>"
    $('#carlogo').append(warpliclear)
    $('.carlogo>li').each(function(){
    $(this).hover(function(){
      //console.log('li的进入的index',$(this).index());
      var li_index = $(this).index()
      $('.carlogo>li').eq(li_index).find('p').stop().show().animate({'top':'0'});
    },function(){
      var li_index = $(this).index()
      $('.carlogo>li').find('p').stop().hide().animate({'top':'-150px'});
    })
   })
  })
  </script>
  <!-- main-1  -->
  <div class="main-1-warpper">
    <div class="main-1">
      <div class="main-1-header">
        <div class="main-title">
          <h2 class="main-advantage-title">我们的优势</h2>
        </div>
        <div class="main-title-line">
          <span></span>
          <div class="main-title-line-content">OUR ADVANTAGES</div>
          <span></span>
        </div>
      </div>
      <div class="main-1-content">
        <div class="main-1-content-item">
          <img src="image/home/ourAdvantage/1.png" alt="">
          <div class="item-go">
            <img src="image/home/ourAdvantage/arrow-shallow.png" alt="">
          </div>
        </div>
        <div class="main-1-content-item">
          <img src="image/home/ourAdvantage/2.png" alt="">
          <div class="item-go">
            <img src="image/home/ourAdvantage/arrow.png" alt="">
          </div>
        </div>
        <div class="main-1-content-item">
          <img src="image/home/ourAdvantage/3.png" alt="">
          <div class="item-go">
            <img src="image/home/ourAdvantage/arrow-shallow.png" alt="">
          </div>
        </div>
        <div class="main-1-content-item">
          <img src="image/home/ourAdvantage/4.png" alt="">
          <div class="item-go">
            <!-- <img src="image/home/ourAdvantage/arrow.png" alt=""> -->
          </div>
        </div>
        <div class="main-1-content-item">
          <img src="image/home/ourAdvantage/5.png" alt="">
          <div class="item-go">
            <!-- <img src="image/home/ourAdvantage/arrow.png" alt=""> -->
          </div>
        </div>
        <div class="main-1-content-item">
          <img src="image/home/ourAdvantage/6.png" alt="">
          <div class="item-go">
            <img src="image/home/ourAdvantage/arrow-shallow.png" alt="">
          </div>
        </div>
        <div class="main-1-content-item">
          <img src="image/home/ourAdvantage/7.png" alt="">
          <div class="item-go">
            <!-- <img src="image/home/ourAdvantage/arrow.png" alt=""> -->
          </div>
        </div>
        <div class="main-1-content-item">
          <img src="image/home/ourAdvantage/8.png" alt="">
          <div class="item-go">
            <img src="image/home/ourAdvantage/arrow-shallow.png" alt="">
          </div>
        </div> 
        <div style="clear:both;"></div>          
      </div>
    </div>
  </div>
  <!-- main-2 -->
  <div class="main-2-warpper" >
    <div class="main-2">
      <div class="main-2-header">
        <div class="main-title">
          <h2 class="main-advantage-title">公务用车车型及方案更改为车型推荐</h2>
        </div>
        <div class="main-title-line">
          <span></span>
          <div class="main-title-line-content">MODEL AND SCHEME</div>
          <span></span>
        </div>
      </div>
      <div class="main-2-content">
        <div class="swiper-container">
          <div class="swiper-wrapper" style="top:30px;">
              <div class="swiper-slide">
                <img src="image/home/officialBusiness/1.png" alt="图片加载失败" title="宣传图片">
              </div>
              <div class="swiper-slide">
                <img src="image/home/officialBusiness/2.png" alt="图片加载失败" title="宣传图片">
              </div>
              <div class="swiper-slide">
                <img src="image/home/officialBusiness/3.png" alt="图片加载失败" title="宣传图片">
              </div>
              <div class="swiper-slide">
                <img src="image/home/officialBusiness/4.png" alt="图片加载失败" title="宣传图片">
              </div>
              <div class="swiper-slide">
                <img src="image/home/officialBusiness/5.png" alt="图片加载失败" title="宣传图片">
              </div>
          </div>
          <!-- 如果需要分页器 -->
          <!-- <div class="swiper-pagination"></div> -->
          
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          
          <!-- 如果需要滚动条 -->
          <!-- <div class="swiper-scrollbar"></div> -->
      </div> 
      </div>    
    </div>
  </div>
  <script type="text/javascript">
    var mySwiper = new Swiper ('.main-2-content .swiper-container', {
      watchSlidesProgress: true,
      slidesPerView: 'auto',
      centeredSlides: true,//active slide会居中
      loop: true,
      loopedSlides:5,
      autoplay: true,
      grabCursor: true, //开启鼠标的抓手形状
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        progress: function(progress) {
          var abs_slideProgress 
          var opacity_num 
          var modify
          for (i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            if(slideProgress<0){
              abs_slideProgress= slideProgress*(-1)
            }else{
              abs_slideProgress= slideProgress
            }
            //console.log('i',i,'slide',slide,'slideProgress',slideProgress,'取绝对值abs_slideProgress',abs_slideProgress) 
            if (abs_slideProgress > 1) {
              modify = (abs_slideProgress-1) * 0.25 + 1;
            }
            if (Math.abs(slideProgress)>0) {
              translateY = (Math.abs(slideProgress)%5)*10+'px'
            }else{
              translateY = 0+'px'
            }
            translateX = slideProgress*modify* 520 + 'px';
            //console.log('slideProgress',slideProgress,'modify',modify,'translateX',translateX,'translateY',translateY)
          
            if(abs_slideProgress==0){
              opacity_num = 1
            }else if (abs_slideProgress > 0 && abs_slideProgress<=3) {
              opacity_num = 0.8
            }else if(abs_slideProgress > 3){
              opacity_num = 0
            }
            //console.log('abs_slideProgress-3',abs_slideProgress,'opacity_num',opacity_num)
            slide.css('opacity', opacity_num);

            //scale = 1 - Math.abs(slideProgress) / 5;
            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            // slide.transform('translateX(' + translate + ') scale(' + scale + ')');
            slide.transform('translateX(' + translateX + ')translateY(' + translateY + ')');
            slide.css('zIndex', zIndex);
          }
        },
        setTransition: function(transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
          }
        }
      }
    })  
    
  </script>
  <!-- main-3 -->
  <div class="main-3-warpper" >
    <div class="main-3">
      <div class="main-3-header">
        <div class="main-title">
          <img src="image/home/contact.png" alt="">
        </div>
        <div class="main-title-line">
          汽车物流&中联物流联合项目组
        </div>
      </div>
      <div class="main-3-content">
        <div class="main-3-contact">
          <div class="main-3-contact-item">
            <img src="image/home/cityPhone.png" alt="">
            <em>
              <p>市电</p>
              <p>010-51896722</p>   
            </em>   
          </div>
          <div class="main-3-contact-item">
            <img src="image/home/routerPhone.png" alt="">
            <em>
              <p>路电</p>
              <p>021-96722</p>   
            </em>   
          </div>
          <div class="main-3-contact-item">
            <img src="image/home/phone.png" alt="">
            <em>
              <p>手机</p>
              <p>1851901922223(杨经理)&nbsp;&nbsp;&nbsp;&nbsp;18519019333(韩经理)</p>   
            </em>   
          </div>  
        </div>
        <div class="main-3-qrcode">
          <img  src="image/home/qrcode.png" alt="">
          <span>扫一扫&nbsp;&nbsp;&nbsp;&nbsp;更多惊喜</span> 
        </div>  
      </div>       
    </div>
  </div>
  <div class="footer-warpper">
    <div class="footer">
      <div class="footer-left">
        <span class="footer-left-text1">中铁特货汽车物流有限责任公司</span>
        <span class="footer-left-text2">CHINA RAILWAY CARGO AUTOMOBILE LOGISTICS CO.LTD.R</span>  
      </div>
      <div class="or-spacer-vertical right">
        <div class="mask"></div>
      </div>
      <div class="footer-right">
        <span class="footer-right-text1">Copyright @ 2018-2014 LeFeng.com All Rights Reserved. 京ICP证080382号 鄂ICP备10006831号-1</span>
        <span class="footer-right-text2">技术支持：中联物流</span>  
      </div>
      <div class="or-spacer-vertical right">
        <div class="mask"></div>
      </div>  
    </div>   
  </div>

  <div class="home-dialog">
    <img src="image/home/TNPC.png" alt="">
    <span class="home-dialog-close"></span>
  </div>
  <script type="text/javascript">
    $('.home-dialog-close').on('click',function(){
      $('.home-dialog').hide()
    })
  </script>

  <div class="home-toTop">
    <img class="totop-button" src="image/home/top-button.png" alt="">
    <img class="totop-button-click" src="image/home/top-button-click.png" alt=""> 
  </div>
  <script type="text/javascript">
    $('.home-toTop').hover(function(){
      $('.totop-button').hide()
      $('.totop-button-click').show()
    },function(){
      $('.totop-button').show()
      $('.totop-button-click').hide()
    })
    $('.home-toTop').on('click',function(){
      $('html , body').animate({scrollTop: 0},'slow');
    })
  </script>



</body>
</html>